<script lang="tsx" setup>

import {useResourceStore} from "../../store/ResourceStore.ts";

const props = defineProps({text: {type: String, required: true}});

const resourceStore = useResourceStore();
const re = (text: string) => {
  let t = text
  const emotes = resourceStore.emotes;

  t = t.replace(/\[s:.*?:.+?]/g, (code) => {
    const e = emotes.find(i => i.code === code);
    return e ? `<img src='${e.url}' alt="${e.name}" />` : code
  });
  return <span v-html={t.replace(/\n/g, '<br/>')}></span>
}


const r = () => re(props.text)
</script>

<template>
  <r/>
</template>

<style scoped>

</style>